<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar
          title="产品服务"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-sticky>
    </div>
    <!-- 主题内容 -->
    <div class="content">
      <!-- 侧边栏 -->
      <div class="side">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item
            v-for="category in categoryDate"
            :key="category.id"
            :title="category.name"
          />
        </van-sidebar>
      </div>
      <!-- 右边内容显示 -->
      <div class="productArea">
        <van-card
          v-for="product in productDate"
          :key="product.id"
          :price="product.price + '.00'"
          :desc="product.description"
          :title="product.name"
          :thumb="product.photo"
        >
          <template #footer>
            <van-stepper
              v-model="product.number"
              default-value="0"
              :min="0"
              @change="numberChangeHandler(product)"
            />
          </template>
        </van-card>
      </div>
      <!-- 提交订单 -->
      <div class="submitButton">
        <van-submit-bar
          :price="total * 100"
          button-text="提交订单"
          @submit="toOrdersSubmit(total)"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      id: "",
      activeKey: this.$route.query.activeKey,
      categoryId: this.$route.query.id,
      order: [],
    };
  },
  methods: {
    onChange(index) {
      this.categoryId = this.categoryDate[index].id;
      //每次切换重新刷新页面数据
      this.queryProduct();
    },
    toOrdersSubmit(totalMoney) {
      for (let item of this.orderLines.values()) {
        let addressObj = {};
        addressObj.number = item.number
          addressObj.price = item.price
          addressObj.productId = item.productId
          addressObj.productName = item.productName
          if(addressObj.number != 0){
            this.order.push(addressObj);
          }
      }
      this.$router.push({
        name: "orderSubmit",
        query: { total: totalMoney, order: this.order },
      });
    },
    // 引入购物车vuex方法
    ...mapMutations("shopcart", ["addShopcart", "clearShopcart"]),
    // 监听步进器
    numberChangeHandler(product) {
      let orderLine = {
        productId: product.id,
        productName: product.name,
        price: product.price,
        number: product.number,
      };
      this.addShopcart(orderLine);
    },
    ...mapActions("category", ["getAllCategory"]),
    ...mapActions("product", ["getAllProduct"]),
    //   查询产品种类
    queryCategory() {
      let data = {
        page: 1,
        pageSize: 100,
      };
      this.getAllCategory(data);
    },
    queryProduct() {
      let data = {
        page: 1,
        pageSize: 100,
        productCategoryId: this.categoryId,
      };
      this.getAllProduct(data);
    },
    // 返回上一页
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  computed: {
    ...mapState("category", ["categoryDate"]),
    ...mapState("product", ["productDate"]),
    ...mapState("shopcart", ["orderLines"]),
    ...mapGetters("shopcart", ["total"]),
  },
  mounted() {},
  created() {
    this.clearShopcart();
    this.queryCategory();
    this.queryProduct();
  },
};
</script>

<style scoped>
.content {
  display: flex;
}
.content .side {
  width: 100px;
  text-align: center;
}
.content .productArea {
  flex: 1;
}
.van-sidebar {
  width: 100px;
}
.submitButton {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 100%;
}
.van-submit-bar {
  width: 100%;
  position: absolute;
  bottom: 50px;
}
.van-card {
  padding: 0px 16px;
}
</style>